/*
    webpack的配置
*/

// 引入path模块
const path = require("path")
// 打包html的插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 在js中抽离css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 打包之前删除dist,避免每次手动删除
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// 把整个配置暴露出去
module.exports = {
    // 入口[以这个文件为入口 开始打包]
    entry: {
        conmmoncss:"./src/js/commonCss.js", //公共样式属性
        // 页面
        home: "./src/js/home.js",
        login: "./src/js/login.js",
        advert: "./src/js/advert.js",
        register:"./src/js/register.js",
        sprotData:'./src/js/sprotData.js',
        myhome:'./src/js/myhome.js',
        trainingCourse:'./src/js/training-course.js',
        courseParticulars:'./src/js/course-particulars.js',
        modifyInfo:'./src/js/modify-info.js',
        run:'./src/js/run.js',
        riding:'./src/js/riding.js',
        play:'./src/js/play.js',
        sportIng:'./src/js/sportIng.js',
    },

    // 出口[存到那里去]
    output: {
        path: path.resolve(__dirname, "dist"), //要输出的路径,必须是个绝对路径
        filename: "js/[name]-[hash:10].js" //输出的文件名
    },

    // loader
    module: {
        rules: [
            // 配置loader解析css文件
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },
            // 配置loader解析less文件
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader', 'less-loader']
            },
            // 配置,当照片大于10kb就单独打包
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader', //不用use改用loader解析
                options: {
                    name: '[hash:16].[ext]', //hash:16是随机产生的 :16就是代表hash值限制16位,ext就是之前是什么后缀名,现在就是什么后缀名    打包后叫什么名字
                    limit: 10 * 1024, //限制大小1024代表1024b就是1kb,10*1024就是代表10kb,就会单独输出
                    esModule: false, //关闭url-loader的es6模块解析,因为后续要使用html-loader,因为html-loader要使用common.js解析,不关闭会报错
                    outputPath: 'imgs'
                }
            },
            // 打包html
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 打包字体文件
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'
                }
            },
            // 把es6语句改为es5语句
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node-modules/
            }
        ]
    },

    // 插件
    plugins: [
        // 打包html插件
        // 首页
        new HtmlWebpackPlugin({
            template: './src/page/home.html',
            filename: 'home.html',
            chunks: ['home','conmmoncss']
        }),
        // 登录
        new HtmlWebpackPlugin({
            template: './src/page/login.html',
            filename: 'login.html',
            chunks: ['login','conmmoncss']
        }),
        // 广告
        new HtmlWebpackPlugin({
            template: './src/page/advert.html',
            filename: 'advert.html',
            chunks: ['advert','conmmoncss']
        }),
        // 注册
        new HtmlWebpackPlugin({
            template: './src/page/register.html',
            filename: 'register.html',
            chunks: ['register','conmmoncss']
        }),
        // 运动信息
        new HtmlWebpackPlugin({
            template: './src/page/sprotData.html',
            filename: 'sprotData.html',
            chunks: ['sprotData','conmmoncss']
        }),
        // 我的
        new HtmlWebpackPlugin({
            template: './src/page/myhome.html',
            filename: 'myhome.html',
            chunks: ['myhome','conmmoncss']
        }),
        // 跑步
        new HtmlWebpackPlugin({
            template: './src/page/run.html',
            filename: 'run.html',
            chunks: ['run','conmmoncss']
        }),
        // 骑行
        new HtmlWebpackPlugin({
            template: './src/page/riding.html',
            filename: 'riding.html',
            chunks: ['riding','conmmoncss']
        }),
        // 课程训练
        new HtmlWebpackPlugin({
            template: './src/page/training-course.html',
            filename: 'training-course.html',
            chunks: ['trainingCourse','conmmoncss']
        }),
        // 课程详细
        new HtmlWebpackPlugin({
            template: './src/page/course-particulars.html',
            filename: 'course-particulars.html',
            chunks: ['courseParticulars','conmmoncss']
        }),
        // 用户信息修改
        new HtmlWebpackPlugin({
            template: './src/page/modify-info.html',
            filename: 'modify-info.html',
            chunks: ['modifyInfo','conmmoncss']
        }),
        // 课程视频
        new HtmlWebpackPlugin({
            template: './src/page/play.html',
            filename: 'play.html',
            chunks: ['play','conmmoncss']
        }),
        // 运动ing
        new HtmlWebpackPlugin({
            template: './src/page/sportIng.html',
            filename: 'sportIng.html',
            chunks: ['sportIng','conmmoncss']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new CleanWebpackPlugin()
    ],

    // // 模式
    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',

    // webserve服务器配置
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), //将那个文件夹做成服务器
        compress: true,
        port: 8888, //端口号
        open: true,
        openPage:'advert.html' //指定打开服务器就访问的页面
    }
}